标签的嵌套用法,调用聚合数据

齐博标签非常强大,可以让不懂程序的你,轻松就能实现所见即所得.

下面跟大家讲解一下,最复杂的运用, 同时使用了union 动态变量参数 与 分页处理标签

比如下面这张图,不仅仅想调用圈子,还想同时调用每个圈子里边的贴子, 当然,你还可以更变态的,同时调用圈子的图片或其它更多的东西都是完全可以的.

更变态的做法,你还可以调用跟贴子相关联的其它数据,也是可以的.

按照传统写PHP代码的处理方法,同时获取,那数据量一大,肯定会卡死.

而在这里,这切,都是通过异步获取数据,所以你完全不用担心效率的问题. 每一块都是单独的加载数据,也不影响用户体验.

实现效果图如下,点击可以查看大图

代码如下:

<div class="pc_qun">
    {qb:tag name="pc_index_showquntest1" type="qun" rows="6" order="view" by="desc"}
    <h2>圈子名称: <a href="{$rs.url}" target="_blank">{$rs.title}</a></h2>
        <div class="listbbs" data-id="{$rs.id}" style="boder:1px solid #ccc;margin:10px;"></div>
    {/qb:tag}
</div>
<div class="list_label_bbs" style="display:none;">
    {qb:tag name="label_listbbs" type="bbs" union="ext_id" rows="6"order="id" by="desc"}
    <a href="{$rs.url}" target="_blank">{$rs.title}</a><br>
    {/qb:tag}
</div>
<script type="text/javascript">
$(document).ready(function () {
    $(".pc_qun .listbbs").each(function(){
        show_qun_bbs($(this));        
    });
});
function show_qun_bbs(that){
    var page = 1;
    var id = that.data("id");
    $.get("{qb:url name='label_listbbs' /}" + page + "&ext_id="+id , function(res){    
        if(res.code==0){
            that.html(res.data);
        }
    });
}
</script>

第一段代码,就是页面布局代码

<div class="pc_qun">
    {qb:tag name="pc_index_showquntest1" type="qun" rows="6" order="view" by="desc"}
    <h2>圈子名称: <a href="{$rs.url}" target="_blank">{$rs.title}</a></h2>
        <div class="listbbs" data-id="{$rs.id}" style="boder:1px solid #ccc;margin:10px;"></div>
    {/qb:tag}
</div>

其中

<div class="listbbs" data-id="{$rs.id}" style="boder:1px solid #ccc;margin:10px;"></div>

这个就是关键之处, 这里就是显示更多贴子的. 你可以更变态的做法, 还可以在他下面一行添加类似的数据,显示相关联的图片 或者是其它更多的相关联数据.

抛开这一行,其它都是之前讲的标签没什么区别.

这里有两个关键的class类,大家不要忽略 class="pc_qun" 与 class="listbbs" 后面的JQ查找元素要用到

另一个关键点就是data-id="{$rs.id}" 这个就是后面的JQ要用到,去取哪个圈子ID的贴子数据.

所以上面这三个关键点,就是他跟普通标签不一样的地方.这里特别要使用到的.

接着再讲解另一段代码,

截图中多了 class="list_label_bbs" 这个类,其实没用到,下面的代码,就省去讲解这个类了

<div style="display:none;">
    {qb:tag name="label_listbbs" type="bbs" union="ext_id" rows="6"order="id" by="desc"}
    <a href="{$rs.url}" target="_blank">{$rs.title}</a><br>
    {/qb:tag}
</div>

这个跟普通标签有一点小区别,主要体现:

其中要包含一个隐藏DIV元素style="display:none;" (题外话:这个是方便你不用写JS模板,同时也方便SEO, 当然更关键的是为了后面的标签数据对应)

也就是说这里的标签必须是隐藏的.因为这里并不是真实用到的数据.只是用这个模子而已.

这里用到的标签名 name="label_listbbs" 跟下面的标签分页 变量名是对应的.必须一样 {qb:url name='label_listbbs' /}

这一段代码,你可以理解为就跟之前说的获取显示更多分页数据,没太大区别.

这里的关键之处,就是使用了动态变量参数 union="ext_id" 这个就是关键中的关键

其它地方,对照JS就不难理解了

这段话的意思,就是查找 圈子容器里pc_qun 里边的 listbbs元素 ,然后执行一个函数 show_qun_bbs 显示贴子. 这些都是前端JS相关的东西.

$(document).ready(function () {
    $(".pc_qun .listbbs").each(function(){
        show_qun_bbs($(this));        
    });
});

下面这段,其实跟之前讲解的标签加载更多分页内容没什么区别的. 关键就是有一个动态参数ext_id= 获取到的是动态变量, 另外分页就总是取第一页, 你可以改一下JS,就可以显示更多页的数据.

function show_qun_bbs(that){
    var page = 1;
    var id = that.data("id");
    $.get("{qb:url name='label_listbbs' /}" + page + "&ext_id="+id , function(res){    
        if(res.code==0){
            that.html(res.data);
        }
    });
}

注意,以上是对圈子的讲解.同样的道理,你可以用在其它地方相关联的数据调用.比较调取用户数据." class="reference-link">注意,以上是对圈子的讲解.同样的道理,你可以用在其它地方相关联的数据调用.比较调取用户数据.